<template>
  <view class="ranking">
    <!-- 通告栏 -->
    <Inform/>
    <!-- 轮播图 -->
    <Slideshow/>
    <!-- 排名前三 -->
    <view class="Ranking_Three">
      <view class="rank-item" v-for="(item, index) in topThree" :key="item.mark" :class="getRankClass(index)"
        :style="`width: ${95 * pxToRpxRatio}rpx; height: ${200 * pxToRpxRatio}rpx;`">

         <image class="rank-circle" :src="item.avtor" mode="aspectFit"></image>

        <!-- <image class="rank-circle"
          src="https://img1.baidu.com/it/u=1090452517,2487311686&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1733936400&t=915fcaa0c135d9a4bcae38bffb82e374"
          mode="aspectFit">
        </image> -->

        <text class="name">{{ item.name }}</text>
        <text class="votes">票数：{{ item.vote }}</text>
      </view>
    </view>

    
    <view class="con">
      <!-- 数据展示 -->
      <Presentation/>
      <!-- 职位 -->
      <Position/>
      <view class="p_Ranking">选手排名</view>
    </view>
    <!-- 排名列表 --> 
    <view class="content">
      <view class="item" v-for="(item, index) in rankingList" :key="item.mark">
        <RankingItem :Serial_Number="item.mark" :name="item.name" :Votes="item.vote" :rank="index + 1"
          :avtor="item.avtor" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import RankingItem from "./component/RankingItem.vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import Inform from "../components/Inform/Inform.vue";
import Slideshow from "../components/Slideshow/Slideshow.vue";
import Presentation from "../components/Presentation/Presentation.vue";
import Position from "../components/Position/Position.vue";
// 响应式数据
const isLoading = ref(false); // 是否正在加载
const pageNumber = ref(1); // 当前页码
const pxToRpxRatio = ref(1);// px与rpx的比值
const topThree = ref([]); // 排名前三
const rankingList = ref([]); // 排名列表
const totalCount = ref(0); // 总选手数量
const position = ref('');//职位

onReachBottom(() => {
  console.log("触底了，加载更多数据");
  if (isLoading.value || rankingList.value.length >= totalCount.value) return; // 已经加载完所有数据
  fetchRankingData();
});

// 动态获取屏幕宽度并计算比例
onLoad(() => {
  console.log("页面加载");
  const systemInfo = wx.getSystemInfoSync();
  pxToRpxRatio.value = 750 / systemInfo.screenWidth;

  // 获取数据
  fetchTopThree();
  fetchRankingData();
});

// 获取前三名
const fetchTopThree = async () => {
  try {
    const res = await uni.request({
      url: 'http://1.92.114.25:6624/users/getThree', // 获取前三名的接口
      method: 'GET',
    });
    if (res.statusCode === 200) {
      let info = res.data.data
      //按照213顺序排列
      topThree.value = [info[1], info[0], info[2]]
    } else {
      console.error("获取前三名失败", res.statusCode);
    }
  } catch (err) {
    console.error("获取前三名失败", err);
  }
};

// 请求接口数据
const fetchRankingData = async () => {
  if (isLoading.value) return; // 如果正在加载，则不进行请求

  isLoading.value = true; // 标记为正在加载
  try {
    const res = await uni.request({
      url: `http://1.92.114.25:6624/users/getRank?page=${pageNumber.value}&position=${position.value}`,
      method: "GET",
    });
    if (res.statusCode === 200) {
      // 更新完整排名列表（追加数据）
      rankingList.value = [...rankingList.value, ...res.data.data];
      totalCount.value = res.data.count; // 总数据量
      pageNumber.value++; // 页码递增
    } else {
      console.error("获取排名数据失败", res.statusCode);
    }
  } catch (err) {
    console.error("获取排名数据失败", err);
  } finally {
    isLoading.value = false; // 请求完成，标记为加载完成
  }
};

// 根据排名动态添加样式类
const getRankClass = (index) => {
  if (index === 0) return "first-place";
  if (index === 1) return "second-place";
  if (index === 2) return "third-place";
  return "";
};

</script>


<style scoped>
:root {
  --ranking-image: url('')
}

.ranking {
  background-color: #211c25;
  /* 浅米黄色背景色，图片中的主背景色 */
  color: #fdcb77;
  /* 深灰文字色，增强可读性 */
}
.con{
  width: 85%;
  margin: auto;
}
.content {
  width: 90%;
  margin: auto;
  border:3px solid #fdcb77 ;
}

.Ranking_Three {
  display: flex;
  justify-content: space-around;
}

.rank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: var(--ranking-image);
  background-repeat: no-repeat;
  padding: 20rpx;
}

.first-place {
  background-position: 0% 100%;
  background-size: 280px 463px;
}

.second-place {
  background-position: 50% 0%;
  background-size: 265px 426px;
}

.third-place {
  background-position: 100% 98%;
  background-size: 290px 474px;
}

.rank-circle {
  background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
  color: #7b492b;
  font-weight: bold;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  margin-top: 100rpx;
  margin-bottom: 10rpx;
}

.name,
.votes {
  color: #ED6E43;
  /* 深灰色字体 */
  font-size: 32rpx;
}

.p_Ranking {
  font-size: 36rpx;
  font-weight: bold;
  margin: 40px 0;
}

.banner {
  background-color: #B9B7B6;
  /* 灰色背景，与图片顶部一致 */
  color: #FFFFFF;
  /* 白色文字 */
  font-size: 48rpx;
  text-align: center;
  padding: 20rpx;
}

.announcement {
  background-color: #E05A3A;
  /* 橙红色，与公告区域一致 */
  color: #FFFFFF;
  /* 白色文字 */
  text-align: center;
  font-size: 32rpx;
  padding: 10rpx 0;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  justify-content: center;
  margin-top: 20rpx;
}

.button-item {
  background-color: #E05A3A;
  /* 橙红色按钮 */
  color: #FFFFFF;
  /* 白色文字 */
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.search-input {
  flex: 1;
  padding: 15rpx;
  border: 1px solid #E05A3A;
  /* 搜索框边框颜色 */
  border-radius: 10rpx 0 0 10rpx;
  font-size: 28rpx;
  color: #ED6E43;
  /* 深灰色字体 */
}

.search-button {
  background-color: #E05A3A;
  /* 搜索按钮背景色 */
  color: #FFFFFF;
  /* 搜索按钮文字 */
  padding: 15rpx 30rpx;
  border-radius: 0 10rpx 10rpx 0;
  font-size: 32rpx;
  font-weight: bold;
  cursor: pointer;
}
</style>
